  <template>
  <div class="containerBox">

    <div class="container">
      <div class="box">
        <div class="switch">
          <el-radio v-model="radio" label="1">策略</el-radio>
          <el-radio v-model="radio" label="2" >强开</el-radio>
          <el-radio v-model="radio" label="3">强关</el-radio>
          <el-button @click="MoreOperations">更多操作</el-button>
          <el-button @click="PlayStatus" >系统悬浮</el-button>
        </div>
      </div>
      <el-dialog class="Popup" title="提示" :visible.sync="dialogVisible" >
        <div class="l">
          <div class="loop">
            <div class="title">
              <span>测试路灯</span>
              <el-switch
                v-model="StateSelection"
                active-text="停用"
                inactive-text="启用"
                :disabled="qy"
                active-color="#004492"
                inactive-color="#004492"
              ></el-switch>
            </div>
              <div class="marking"></div>
              <div class="states">
                <ul class="three">
                  <li v-for="item in arr" :key="item.id">
                    <span>
                     {{item.id}}
                    </span>
                    <div class="rigth">
                      <el-radio-group v-model="item.force">
                        <el-radio :label="1">策略</el-radio>
                        <el-radio @change="StrongOpen" :label="2">强开</el-radio>
                        <el-radio @change="Guan(item)" :label="3">强关</el-radio>
                      </el-radio-group>
                      <label >详情</label>
                    </div>
                  </li>
                </ul>
              </div>
          </div>
        </div>
        <div class="block">
          <el-pagination small layout="prev, pager, next" :total="50"></el-pagination>
        </div>
      </el-dialog>
      <!-- 电学参数 -->
      <el-dialog title="电学参数信息" :visible.sync="coloralScience" id="tables" width="30%">
        <ul class="Survey public">
          <li>采集时间: {{parameter.caijishijian}}</li>
          <li>色温：{{parameter.sewen}}</li>
          <li>亮度：80%</li>
          <li class="color">电压:5.8V</li>
          <li>电流：{{parameter.dianliu}}</li>
          <li>漏电压 {{parameter.loudianya}}</li>
        </ul>
        <ul class="Survey1 public">
          <li>零线电缆温度{{parameter.lingxiandianlanwendu}}°C</li>
          <li class="red" title="温度过高">火线电缆温度2000°C</li>
          <li>电表读数 {{parameter.dianbiaodushu}}</li>
        </ul>
        <ul class="Survey1 public">
          <li>有功率:{{parameter.yougonggonglv}}</li>
          <li>交流频率:{{parameter.jiaoliupinlv}}</li>
          <li>功率因数:{{parameter.gonglvyinshu}}</li>
        </ul>
      </el-dialog>
      <!-- 进线参数-->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleTable: [],
      checkList: ["复选框 A"],
      coloralScience: false,
      radio: "1",
      dialogVisible: false,
      // 进线参数
      line: false,
      arr: [
        { id: "路灯1", force: 1 },
       { id: "路灯2", force:2 }
      ],
      // 电学参数信息
      parameter: {},
      // 电杆多选
      Multiple: [],
      StateSelection:""
    };
  },
  mounted() {
  
  },
  methods: {
    PlayStatus(){
        // console.log(this)
        this.$parent.PlayStatus();
    },
    // 灯杆选择
    MoreOperations() {
      this.dialogVisible = true;
    }
  }
};
</script>
  <style scoped>
* {
  box-sizing: border-box;
}
.containerBox {
  width: 100%;
  height: 100%;
  position: absolute;
}
.container {
  height: 100%;
}
.box {
  position: absolute;
  width: fit-content;
  padding: 0 20px 0 20px;
  z-index: 99999999;
  bottom: 120px;
   right: 0;
   left: 0;
   margin:  auto;
}
.item {
  margin-top: 8px;
  margin-left: 40px;
}
.switch {
  background-color: rgba(0,0,0,0.8);
  border: 1px solid #fff;
  padding: 0 20px 0 20px;
}
.top {
  height: 30px;
  background-color: RGB(0, 66, 143);
}
.switch .el-radio {
  line-height: 50px;
  color: #0a7e7e;
}
.block {
  text-align: center;
}
/deep/ .switch .el-radio__input.is-checked + .el-radio__label {
  color: #0AC07E;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
      background: #0AC07E;
}
/deep/ .el-dialog__body {
  overflow: hidden;
  width: fit-content;
}
/deep/ .el-dialog {
  width: fit-content;
}
.switch .el-button {
  margin-left: 40px;
  font-size: 12px;
  padding: 8px 16px;
  color: #fff;
  border-radius: 8px;
  margin-top: 8px;
  background-color: RGBA(9,218,186,230);
}
/deep/ .switch .el-radio__inner {
  background-color: #0a7e7e;
}
/deep/ .rigth .el-radio__inner {
  background-color: #0a7e7e;
}
.container /deep/ .el-dialog__header {
  background-color: #0a7e7e;
}
.container /deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .el-switch__label {
  color: #0a7e7e;
}
/deep/ .left .el-button {
  background-color: #0a7e7e;
}

.loopBox{
  width: fit-content;
 padding: 0 5px;
}
.detailsBox {
 display:inline-block;
}
.loop {
  border: #0a7e7e 1px solid;
  margin-top: 10px;
}
.title {
  border-bottom: #0a7e7e 1px solid;
  height: 29px;
  color: #0a7e7e;
  line-height: 29px;
  padding-left: 20px;
  padding-right: 20px;
}
.title .el-switch {
  float: right;
  margin-top: 5px;
}
.electric {
  /* height: 228px; */
  overflow: hidden;
  padding-top: 18px;
  padding-left: 18px;
}
.states::-webkit-scrollbar {
  width: 3px;
  background-color: #0a7e7e;
}
.states::-webkit-scrollbar-track {
  background-color: #d6e2ed;
}
.states::-webkit-scrollbar-thumb {
  background: #0a7e7e;
}
.marking {
  float: left;
}
.states {
  width: fit-content;
    margin: auto;
  height: 220px;
  padding-top:20px;
  overflow: hidden;
  overflow-y: scroll;
}
.states ul {
  float: left;
  margin-left: 15px;
  margin-right: 15px;
}
.states li span {
  display: inline-block;
  padding:3px 10px;
  border: 1px solid #39ca64;
  border-radius: 8px;
  text-align: center;
  color: #0a7e7e;
  position: relative;
}
.individual {
  text-align: center;
  height: 34px;
  border-bottom: 1px #cccccc solid;
  line-height: 34px;
}
.individual i {
  width: 34px;
  text-align: center;
  margin-right: 5px;
}
.individual span {
  border-left: 1px #cccccc solid;
  text-align: center;
  display: inline-block;
  width: 143px;
  color: RGB(116, 116, 116);
  font-size: 12px;
}

.states span :hover span {
  color: #39ca64;
}
.states span i {
  width: 10px;
  position: absolute;
  border-top: 1px #3ccb66 solid;
  top: 13px;
  right: -11px;
}
.rigth {
  float: right;
  width: fit-content;
  height: 28px;
  border: #3ccb66 1px solid;
  border-radius: 8px;
  margin-left: 10px;
  line-height: 25px;
  text-align: center;
  padding: 0 18px;
}

.three li {
  margin-bottom: 10px;
}
.container .el-radio {
  margin-left: 5px;
  color: #0a7e7e;
}
.Demarcation {
  border-top: 2px solid #606266;
}
.three :hover .Contai_details{
  cursor: pointer;
}
.rigth:hover {
cursor: pointer;
}
</style>